<template>
    <div class="app-container calendar-list-container">
        <!-- 查询和其他操作 -->
        <section class="filter-container">
            <el-button class="filter-item" type="primary" @click="openDialog">菜单</el-button>
            <el-button class="filter-item" type="primary" @click="expandAll">{{expand?'关闭':'展开'}}</el-button>
        </section>
        <tree-table :data="dataTree" :columns="columns" :expandAll="expand" border stripe v-loading="loading" />
        <!-- 编辑模态框 -->
        <section>
            <el-dialog :visible.sync="dialog.isShow" :show-close="false" :fullscreen="dialog.fullscreen">
                <el-row slot="title">
                    <el-col :span="10" style="padding-top: 5px">
                        <span style="font-size: 18px;">菜单</span>
                    </el-col>
                    <el-col :span="2" :offset="11">
                        <el-button type="text" v-if="!dialog.fullscreen" icon="iconfont ali-quanping" @click="dialog.fullscreen = true" style="float: right"></el-button>
                        <el-button type="text" v-else icon="iconfont ali-zuixiaohua" @click="dialog.fullscreen = false" style="float: right"></el-button>
                    </el-col>
                    <el-col :span="1">
                        <el-button type="text" icon="iconfont ali-guanbi" @click="dialog.isShow = false" style="float: right"></el-button>
                    </el-col>
                </el-row>
                <menu-temp ref="menuTemp" :dataTree="dataTree"/>
                <span slot="footer" class="dialog-footer">
                    <el-button size="mini" @click="dialog.isShow = false">取 消</el-button>
                    <el-button size="mini" type="primary" @click="editMenu">保 存</el-button>
                </span>
            </el-dialog>
        </section>
        <!-- 编辑菜单 -->
        <section>
            <el-dialog :visible.sync="editShow" title="编辑" width="400px">
                <el-form ref="form" :model="form" :inline="true" label-width="90px">
                    <el-form-item label="名称" prop="menu_name" :rules="filter_rules({required:true})">
                        <el-input clearable style="width: 200px;" v-model.trim="form.menu_name" placeholder="请输入菜单名称"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button size="mini" type="primary" @click="editShow = false">取消</el-button>
                    <el-button size="mini" plain @click="validate">确认</el-button>
                </span>
            </el-dialog>
        </section>
    </div>
</template>
<script>
import { menu_listAll, menu_edit } from "@/api/menu";
import { initColumn } from './menu'
import treeTable from '@/components/TreeTable'
import menuTemp from './menuTemp'
export default {
    name: 'menuSet',
    components: { treeTable, menuTemp },
    data() {
        return {
            loading: false,
            expand: false,
            columns: initColumn(this.editById, this.openEdit),
            dataTree: [],
            dialog: { isShow: false, fullscreen: false },
            form: {},
            editShow: false
        }
    },
    methods: {
        validate(){
            this.$refs['form'].validate(async (valid) => {
                if (valid) {
                    this.editShow = false;
                    await this.editById(this.form, 'menu_name');
                    this.initList();
                } else {
                    return false;
                }
            })
        },
        async openEdit(row){
            this.editShow = true;
            this.form = {...row};
        },
        async editById(row, decide){
            this.loading = true;
            let close_status;
            if(decide == 'menu_name'){
                close_status = row.close_status
            }else{
                close_status = ~~!row.close_status
            }
            let params = {
                        id: row.id,
                        menu_name   : row.menu_name,
                        menu_code   : row.menu_code,
                        parent_id   : row.parent_id,
                        company_id  : row.company_id,
                        menu_url    : row.menu_url,
                        close_status: close_status
                    }
            let { data } = await menu_edit(params);
            this.initList();
            if(data.status === 100){
                this.$message.success("操作成功")
            }
        },
        expandAll(){
            this.expand = !this.expand;
            this.initList();
        },
        openDialog(){
            this.dialog.isShow = true;
            this.$nextTick(_=> {
                this.$refs['menuTemp'].initDefault();
            })
        },
        async editMenu() {
            this.dialog.isShow = false;
            this.loading = true;
            await this.$refs['menuTemp'].submit();
            this.initList();
        },
        formatTabelData(data) {
            let tree = [];
            for (let i = 0; i < data.length; i++) {
                let element = data[i];
                if(element.parent_id === 0){
                    let obj = {
                        ...element,
                        isClose: element.close_status == 1 ? '启用' : '禁用',
                        btn: element.close_status == 1 ? '禁用': '启用',
                        edit: '编辑',
                        children: []
                    }
                    tree.push(obj);
                    data.splice(i, 1);
                    i--;
                }
            }
            run(tree);
            function run(chiArr) {
                if (data.length !== 0) {
                    for (let i = 0; i < chiArr.length; i++) {
                        for (let j = 0; j < data.length; j++) {
                            if (chiArr[i].menu_url == data[j].parent_id) {
                                let obj = {
                                    ...data[j],
                                    isClose: data[j].close_status == 1 ? '启用' : '禁用',
                                    btn: data[j].close_status == 1 ? '禁用': '启用',
                                    edit: '编辑',
                                    children: []
                                }
                                chiArr[i].children.push(obj);
                                data.splice(j, 1);
                                j--;
                            }
                        }
                        run(chiArr[i].children);
                    }
                }
            }
            return tree;
        },
        async initList() {
            this.loading = true;
            const { data } = await menu_listAll({ company_id: localStorage.getItem("companyId") - 0 });
            this.loading = false;
            if (data.status === 100) {
                this.dataTree = this.formatTabelData(data.data.rows);
            }
        }
    },
    created() {
        this.initList();
    }
}
</script>
